<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= isset($title) ? $title : '研学选择数据管理系统' ?></title>
    <link href="<?= base_url('css/font-awesome.min.css') ?>" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="<?= base_url('js/tailwind.min.js') ?>"></script>
    <script src="<?= base_url('js/chart.js') ?>"></script> <!-- 示例：引入图表库 -->
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#1E40AF',
                        accent: '#3B82F6',
                        neutral: '#F3F4F6',
                        'neutral-dark': '#1F2937',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.02);
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-md fixed top-0 left-0 right-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa-solid fa-graduation-cap text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-gray-800">研学基地信息系统</h1>
            </div>
<!--             <div class="flex items-left space-x-16">
                <a href="/search" class="text-gray-700 hover:text-primary">点击搜索研学基地</a>
                <a href="list" class="text-gray-700 hover:text-primary">点击展示研学列表</a>
            </div> -->
            <button class="md:hidden text-gray-700">
                <i class="fa-solid fa-bars text-xl"></i>
            </button>
        </div>
    </header>

    <!-- 主内容区 -->
    <div class="pt-16 pb-8 min-h-screen">
        <div class="container mx-auto px-4">
            <?= $content ?>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                <div class="mb-4 md:mb-0">
                    <p class="text-gray-600 text-sm">&copy; 2025 研学基地信息系统. 保留所有权利.</p>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>